<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8"/>
    <title>多端一站式网络在线选课系统</title>
    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <%--<script src="static/js/jquery.fullPage.min.js"></script>--%>
    <script type="text/javascript" src="static/js/wow.min.js"></script>
    <script type="text/javascript" src="static/js/velocity.js"></script>
    <script type="text/javascript" src="static/js/shutter.js"></script>

    <%--<link href="static/css/jquery.fullPage.css" type="text/css" rel="stylesheet"/>--%>
    <link href="static/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="static/css/index.css" type="text/css" rel="stylesheet"/>
    <link href="static/css/animate.css" type="text/css" rel="stylesheet"/>
    <link href="static/css/shutter.css" type="text/css" rel="stylesheet"/>


    <%--富文本编辑器--%>
    <script type="text/javascript" src="static/js/ushareEditor.js"></script>
    <link href="static/css/ushareEditor.css" type="text/css" rel="stylesheet"/>


    <script>
        $(document).ready(function () {
            $('.studentAdmin').click(function () {
                $(window).attr('location', 'jsp/studentAdmin.jsp');
            });

            $('.teacherAdmin').click(function () {
                $(window).attr('location', 'jsp/teacherAdmin.jsp');
            });

            $('.admin').click(function () {
                $(window).attr('location', 'jsp/admin.jsp');
            });


            //wow 动画
            var wow = new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            });
            wow.init();

            //轮播
            $('.shutter').shutter({
                shutterW: 1300, // 容器宽度
                shutterH: 500, // 容器高度
                isAutoPlay: true, // 是否自动播放
                playInterval: 4000, // 自动播放时间
                curDisplay: 1, // 当前显示页
                fullPage: false // 是否全屏展示
            });


        });
    </script>

    <style>
        #editor {
            margin-top: 50px;
        }
    </style>

</head>
<body>


<div id="fullpage" class="main main-content">


    <div class="main-body row">


        <div class="main-left  col-md-12 col-xs-12 col-lg-12"
             style="background-image: url(static/img/bg.png);">
            <div id="top">
                <div class="nav">

                    <div class="row nav-home">
                        <div class="nav-left col-lg-offset-1  col-md-offset-1 col-xs-offset-1 col-md-4 col-xs-4 col-lg-4">
                            <div class="logo">
                                <img src="static/img/logo.png" class="wow bounceInRight" data-wow-duration="2s"
                                     data-wow-delay="0s" data-wow-offset="10" data-wow-iteration="1"/>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="main-left-contains text-center">
                    <b><img src="static/img/main-logo.png" height="150px" class="wow rollIn   "
                            data-wow-duration="2" data-wow-delay="1s" data-wow-offset="100"
                            data-wow-iteration="1"/></b>
                    <h3 class="wow bounceInDown  " data-wow-duration="2s" data-wow-delay="1.5s"
                        data-wow-offset="10"
                        data-wow-iteration="1">一站式网线在线选课系统</h3>
                    <h4 class="wow bounceInLeft " data-wow-duration="2s" data-wow-delay="2.0s"
                        data-wow-offset="10"
                        data-wow-iteration="1">大数据时代 一站式在线网课选课</h4>
                    <h5 class="wow bounceInRight " data-wow-duration="2s" data-wow-delay="2.0s"
                        data-wow-offset="10"
                        data-wow-iteration="1">最灵活、最好用、最安全的在线网络选课系统</h5>
                    <div class="operator">
                        <button type="button" class="btn btn-sample teacherAdmin wow bounceInDown "
                                data-wow-duration="2s" data-wow-delay="2s" data-wow-offset="10"
                                data-wow-iteration="1">教师入口
                        </button>
                        <button type="button" class="btn btn-sample studentAdmin wow bounceInUp "
                                data-wow-duration="2s" data-wow-delay="2s" data-wow-offset="10"
                                data-wow-iteration="1">学生入口
                        </button>
                        <button type="button" class="btn btn-sample admin wow bounceInDown "
                                data-wow-duration="2s"
                                data-wow-delay="2s" data-wow-offset="10" data-wow-iteration="1">后台入口
                        </button>
                    </div>
                    <div class="wavyline">
                        <img src="static/img/main-left-wavyline.png" width="70%" class="wow flipInX"
                             data-wow-duration="3s" data-wow-delay="3s" data-wow-offset="10"
                             data-wow-iteration="1"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="main-right  col-md-12 col-xs-12 col-lg-12">
            <div class="main-right-contains text-center">
                <h2 class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="0.5s" data-wow-offset="10"
                    data-wow-iteration="1">在线网课选课系统为您提供更为便捷的服务</h2>
                <div class="main-right-content center-block" style="width: 90%;">
                    <div class="row">
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 ">
                            <div class="col-md-12 col-lg-12 col-xs-12 ">
                                <img src="static/img/main-right-logo1.png" width="66%" class="wow bounceInRight "
                                     data-wow-duration="1s"
                                     data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1"/>

                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <h4 class="wow bounceInUp " data-wow-duration="2s"
                                        data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="1">强大的用户管理功能</h4>
                                </div>
                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <p class="wow bounceInUp " data-wow-duration="2s"
                                       data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1">
                                        可通过管理后台实现对用户信息的精准管理,使管理更高效，更便捷，更迅速!
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <div class="col-md-12 col-lg-12 col-xs-12 ">
                                <img src="static/img/main-right-logo2.png" width="66%" class="wow bounceInDown "
                                     data-wow-duration="1s"
                                     data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1"/>

                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <h4 class="wow bounceInUp " data-wow-duration="2s"
                                        data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="1">优美的后台管理系统</h4>
                                </div>
                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <p class="wow bounceInUp " data-wow-duration="2s"
                                       data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1">
                                        Layui---经典模块化前端框架 由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <div class="col-md-12 col-lg-12 col-xs-12 ">
                                <img src="static/img/main-right-logo3.png" width="66%" class="wow bounceInDown "
                                     data-wow-duration="1s"
                                     data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1"/>

                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <h4 class="wow bounceInUp " data-wow-duration="2s"
                                        data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="1">单页式异步系统</h4>
                                </div>
                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <p class="wow bounceInUp " data-wow-duration="2s"
                                       data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1">
                                        用最少的页面,处理最多的功能。使用Ajax与后台处理，系统更加流畅，交互更加友好</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3 col-sm-6 col-xs-12">
                            <div class="col-md-12 col-lg-12 col-xs-12 ">
                                <img src="static/img/main-right-logo1.png" width="66%" class="wow bounceInLeft "
                                     data-wow-duration="1s"
                                     data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1"/>

                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <h4 class="wow bounceInUp " data-wow-duration="2s"
                                        data-wow-delay="1s" data-wow-offset="10" data-wow-iteration="1">权限明确的后台系统</h4>
                                </div>
                                <div class="col-md-12 col-lg-12 col-xs-12 ">
                                    <p class="wow bounceInUp " data-wow-duration="2s"
                                       data-wow-delay="1.5s" data-wow-offset="10" data-wow-iteration="1">
                                        管理员系统，学生系统，教室系统。三端三系统,互不干涉。内部系统权限更为明确</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main-lunbo  col-md-12 col-xs-12 col-lg-12">
            <div class="main-right-contains text-center">
                <h1 class="wow bounceInUp" data-wow-duration="2s" data-wow-delay="0.5s" data-wow-offset="10"
                    data-wow-iteration="1">技术支持</h1>
                <div class="main-right-content center-block" style="width: 100%;">
                    <div class="row">
                        <div class="shutter wow bounceInDown" data-wow-duration="2s" data-wow-delay="1s"
                             data-wow-offset="10"
                             data-wow-iteration="1">
                            <div class="shutter-img">
                                <a href="https://www.bootcss.com/"
                                   data-shutter-title="简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。"><img
                                        src="static/img/bootstrap.png" alt="简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。"></a>
                                <a href="http://www.jq22.com/"
                                   data-shutter-title="jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。"><img
                                        src="static/img/jquery.png" alt="jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。"></a>
                                <a href="https://www.layui.com/"
                                   data-shutter-title="经典模块化前端框架。由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案"><img
                                        src="static/img/layui.png"
                                        alt="经典模块化前端框架。由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案"></a>
                                <a href="http://www.huogo.com/"
                                   data-shutter-title="WOW.js - 让页面滚动更有趣. WOW.js 能让页面滚动时显示动画，使页面更有趣。"><img
                                        src="static/img/wow.png"
                                        alt="WOW.js - 让页面滚动更有趣. WOW.js 能让页面滚动时显示动画，使页面更有趣。"></a>
                            </div>
                            <ul class="shutter-btn">
                                <li class="prev"></li>
                                <li class="next"></li>
                            </ul>
                            <div class="shutter-desc">
                                <p></p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="main-editors  col-md-12 col-xs-12 col-lg-12">
            <div class="main-right-contains">
                <h1 class="wow bounceInUp  text-center" data-wow-duration="2s" data-wow-delay="0.5s"
                    data-wow-offset="10"
                    data-wow-iteration="1">技术反馈</h1>
                <div class="main-right-content center-block" style="width: 80%;">
                    <div class="row">
                        <div class="ushareEditors wow bounceInDown" data-wow-duration="2s" data-wow-delay="1s"
                             data-wow-offset="10"
                             data-wow-iteration="1">
                            <div id="editor">
                            </div>
                            <input type="hidden" id="editorContent"/>
                            <div class="btn-group">
                                <button type="button" class="btn btn-info lookHtml" data-toggle="modal"
                                        data-target="#mymodal-data">查看效果
                                </button>
                                <button type="button" class="btn btn-success save">保存</button>
                                <button type="button" class="btn btn-primary release">发布</button>
                                <button type="button" class="btn btn-danger  reduction">还原</button>
                                <button type="button" class="btn btn-info lookTxt" data-toggle="modal"
                                        data-target="#mymodal-data">查看文本
                                </button>
                                <button type="button" class="btn btn-danger cleanText">清空</button>
                                <button type="button" class="btn btn-primary lookGame">不看了!  来点彩蛋</button>
                            </div>

                            <div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog"
                                 aria-labelledby="mySmallModalLabel" aria-hidden="true" style="z-index: 1000000">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span
                                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                            </button>
                                            <h4 class="modal-title">显示效果</h4>
                                        </div>
                                        <div class="modal-body">

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary  save">保存</button>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>


        <script type="text/javascript">
            var Editors = window.ushareEditor;
            var editor = new Editors('#editor');
            editor.customConfig.height = '300'; // 默认400 高度
            editor.customConfig.pasteFilterStyle = false; //关闭粘贴文本处理事件  默认true
            // 自定义字体
            editor.customConfig.fontNames = [
                'PingFang SC', '宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'
            ];

            // 表情面板可以有多个 tab ，因此要配置成一个数组。数组每个元素代表一个 tab 的配置
            editor.customConfig.emotions = [{
                // tab 的标题
                title: '新浪',
                // type -> 'emoji' / 'image'
                type: 'image',
                // content -> 数组
                content: [{
                    alt: '坏笑',
                    title: '坏笑',
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/4d/2018new_huaixiao_org.png'
                }, {
                    alt: '顶',
                    title: '顶',
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ae/2018new_ding_org.png'
                }, {
                    alt: "微笑",
                    title: "微笑",
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png'
                }, {
                    alt: '拜拜',
                    title: '拜拜',
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fd/2018new_baibai_thumb.png'
                }, {
                    alt: '笑cry',
                    title: '笑cry',
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/2018new_xiaoku_org.png'
                }, {
                    alt: '馋嘴',
                    title: '馋嘴',
                    src: 'https://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fa/2018new_chanzui_org.png'
                }]
            }, {
                // tab 的标题
                title: 'emoji',
                // type -> 'emoji' / 'image'
                type: 'emoji',
                // content -> 数组
                content: '😀 😃 😄 😁 😆 😅 😂 😊 😇 🙂 🙃 😉 😓 😪 😴 🙄 🤔 😬 🤐'.split(/\s/)
            }];

            function throttle(method, context) {
                clearTimeout(method.tId);
                method.tId = setTimeout(function () {
                    method.call(context);
                }.bind(this), context ? context : 500);
            }

            editor.customConfig.onchange = function (html) {
                function saveContent() {
                    // 自定义的内容处理函数
                    $('#editorContent').val(editor.txt.html());
                }

                throttle(saveContent); // 500ms内只会执行一次该函数
            }


            editor.create();


            $(".save").click(function () {
                $('#editorContent').val(editor.txt.html());
                alert("保存成功!")
            });

            $(".reduction").click(function () {
                editor.txt.html($('#editorContent').val());
                alert("还原成功")
            });

            $(".lookHtml").click(function () {
                $(".modal-body").html(editor.txt.html());
            });

            $(".lookTxt").click(function () {
                $(".modal-body").html(editor.txt.text());
            });

            $(".release").click(function () {
                $('#editorContent').val(editor.txt.html());
                alert("发布成功!")
            });

            $(".cleanText").click(function () {
                editor.txt.clear();
                alert("清空成功!")
            });

        </script>

        <div class="navbar navbar-default navbar-fixed-bottom navbar-toggle nav-game" role="navigation">
            　<div class="navbar-header">
            　	<a href="##" class="navbar-brand">特效看够了?来点小游戏吧</a>
            　</div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.jsp">动态首页</a></li>
                <li><a href="index0.jsp">静态首页</a></li>
                <li><a href="game/见缝插针.html">见缝插针</a></li>
                <li><a href="game/canvas打飞机游戏.html">canvas打飞机</a></li>
                <li><a href="game/吃豆人.html">吃豆人</a></li>
                <li><a href="game/2048.html">2048</a></li>
            </ul>
        </div>

        <script>


            $(".lookGame").click(function(){
                    show();

            });


            function show() {
                $(".nav-game").removeClass("navbar-toggle");
                $(".lookGame").text("显示啦! 显示啦!")
            }

        </script>





    <%--<div id="footer">--%>
        <%--<div class="footer-contains center-block text-center">--%>
        <%--<h4>@2019-2019</h4>--%>
        <%--</div>--%>
        <%--</div>--%>
    </div>
</body>
</html>
